<template>
    <div class="video">
        <div v-show="!isError" class="videoBox">
            <div class="box">
                <video id="videobox" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" preload="auto"
                    width="100%" ref="videoRef" autoplay="false" :poster="videoDetail.thumbnailPath">
                    <p class="vjs-no-js">不支持播放</p>
                </video>
            </div>
            <div class="operate">
                <Loverswitch v-model="like" @favourite="favourite" @cancel-favourite="cancelFavourite"></Loverswitch>
            </div>
        </div>
        <div v-show="isError" class="videoBox">
            <p>视频出错了！</p>
        </div>

        <div class="detail">
            <h1 class="title">{{ videoDetail.fileName.replace(videoDetail.ext, '') }}</h1>
            <div class="item">
                时长：{{ formatDuration(videoDetail.duration) }}
            </div>
            <div class="item">
                格式：{{ videoDetail.ext }}
            </div>
            <div class="item">
                地址：{{ videoDetail.relativePath }}
            </div>
            <div class="item">
                体积：{{ formatFileSize(videoDetail.size) }}
            </div>
            <div class="item download">
                操作：<el-link type="success" @click="downloadClick">{{ operateText }}</el-link>
            </div>
            <div class="item progress" v-if="tasksProcess[videoDetail.relativePath]">
                下载进度：
                <MyProgress :progress="tasksProcess[videoDetail.relativePath].process"></MyProgress>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { addHistory } from "../api/history"
import { formatDuration } from "../util/utils"
import { onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router"
import videojs from "video.js";
import { useVideoStore } from "../store/index"
import { useDownloadStore } from "../store/index"
import { storeToRefs } from "pinia"
import { formatFileSize } from "../util/utils"
import MyProgress from "@/components/MyProgress.vue";
// @ts-ignore
import { ElMessageBox, ElMessage } from "element-plus";
import Loverswitch from "@/components/loverswitch.vue";
import { getFavourite, addFavourite, deleteFavourite } from "../api/favourite"

const downloadStore = useDownloadStore()
const { tasksProcess } = storeToRefs(downloadStore)
const videoStore = useVideoStore()
const { videoDetail } = storeToRefs(videoStore)
// 喜欢视频
const like = ref(false)
let favouriteId = 0


async function favourite() {
    let res = await addFavourite(videoDetail.value.id)
    favouriteId = res.data.id
    ElMessage({
        type: "success",
        message: "添加到喜欢列表"
    })
}

async function cancelFavourite() {
    let res = await deleteFavourite(favouriteId)
    ElMessage({
        type: "success",
        message: res.data
    })
}


const route = useRoute()





var isError = ref<boolean>(false);
// var videoSrc = ref<string>("");
var videoRef = ref();
var player = ref();

const canclick = ref(true)

const operateText = computed(() => {
    let obj = tasksProcess.value[videoDetail.value.relativePath]
    if (!obj && canclick.value) {
        // 如果不存在
        return "下载"
    }
    if (!obj && !canclick.value) {
        return "载入中。。。请稍后"
    }

    if (obj && obj.isDownloading) {
        return "下载中。。。"
    }

    if (obj && obj.isFinished) {
        canclick.value = true
        return "重新下载"
    }
    canclick.value = true
    return "下载"

})


async function downloadClick() {
    canclick.value = false
    if (operateText.value == '重新下载') {
        try {
            await ElMessageBox.confirm("当前任务已经下载过了，确认还需要下载吗", "注意", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            });
        } catch (error) {
            return;
        }
    }
    downloadStore.webWorkDownload(videoDetail.value)
}



onMounted(async () => {
    await videoStore.getVideoChangeStore(Number(route.params.id))
    await addHistory(Number(route.params.id))
    getFavourite(videoDetail.value.id).then(res => {
        if (res.data.length > 0) {
            like.value = true
            favouriteId = res.data[0].Favourite.id
        }

    })
    init();
});
const init = () => {
    player.value = videojs(
        videoRef.value,
        {
            //视频源
            sources: [
                {
                    src: videoDetail.value.path,
                    type: `video/${videoDetail.value.ext.replace(".", '').toLowerCase()}`,
                },
            ],
            //是否显示播放按钮
            bigPlayButton: true,
            playbackRates: [0.5, 1, 1.5, 2],
            controls: true,
            autoplay: false,
            preload: "metadata",
            //设置小喇叭音量键
            controlBar: {
                fullscreenToggle: true,
                // 音量条的横向还是纵向显示
                volumePanel: {
                    inline: true,
                },
            },
        },
        () => {
            player.value.on("play", () => {
                console.log("开始播放");
            });
            //设置默认2倍速
            player.value.playbackRate(1);
        }
    );
};
</script>
<style lang="scss" scoped>
$fontCol: #03081a;

.video {
    padding: 20px 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;



    .videoBox {

        .box {
            max-width: 1080px;
            min-width: 200px;
            border-radius: 20px;
            overflow: hidden;
        }

        flex: 5 0 500px;

        @media (max-width: 610px) {
            flex-basis: 200px;
        }

        .operate {
            margin: 30px 0 0 0;
            display: flex;
            justify-content: flex-end;
            padding: 0 20px;
        }
    }

    .detail {
        flex: 1;
        min-width: 280px;


        @media (min-width: 582px) {
            margin: 0 0 0 30px;
        }

        .title {
            word-break: break-all;
            margin: 30px 0 0 0;
            font-weight: 600;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 28px;
        }

        .item {
            margin-top: 20px;
            color: rgba($color: $fontCol, $alpha: 0.6);
            font-size: 14px;
            word-break: break-all;

        }

        .download {
            display: flex;
            align-items: center;
        }

        .progress {
            display: flex;
            width: 100%;

            ::v-deep(.el-progress) {
                flex: 1;
            }

            ::v-deep(.el-progress__text) {
                color: #fff !important;

            }
        }
    }


}


/*base code*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}
</style>
  
  